import React from "react";
import styles from "./testc.module.css";
import {stateFromA} from "../../recoil/demo";
import TestA from "../testA";
import TestB from "../testB";
import {atom,useRecoilState, useRecoilValue} from "recoil";

export const stateFromC = atom({
    key: 'stateFromC',
    default: 'stateFromC'
})

export default function TestC() {

    console.log('组件C渲染了')
    // const countLength = useRecoilValue(countStateFromA);

    const [stateC, setStateC] = useRecoilState(stateFromC);

    return (<div className={styles.container}>
        <h2>这是C组件</h2>
        <div className="form-control">
            <input type="text" value={stateC} onChange={event => setStateC(event.target.value)}/>
        </div>
        <TestA/>
        <TestB/>
        {/*<p>stateFromA.length = {countLength}</p>*/}
    </div>)
}
